/**
 * @authors tanqichao
 * @date    2017-06-07 13:59:27
 * @module  素材上传
 */

import { Upload, message, Button, Icon, Modal } from 'antd';
import React, { Component, PropTypes } from 'react';
import Styles from '../createTradition.less';

class UploadMaterial extends Component {
  constructor (props) {
    super(props)
    this.state = {
      visible: false
    }
  }

  //上传图片
  change = (info) => {
    const list = [].concat(this.props.creatives)
    if (info.file.status === 'done') {
      let fileList = info.fileList.splice(-1)
      fileList = fileList.filter((file) => {
        if (file.response && file.response.success) {
          const img = file.response.data
          list.push({
            id: file.uid,
            bannerUrl: img.url,
            fileName: file.name,
            fileSize: img.size,
            width: img.width,
            height: img.height,
            fileType: file.name.split('.')[1]
          })
          this.props.onUpdate(list)
        }
      })
    }
  }
  // 删除图片
  onRemoveItem = (id) => {
    const list = [].concat(this.props.creatives)

    list.map((item, index) => {
      if (item.id === id) {
        list.splice(index, 1)
      }
    })

    this.props.onUpdate(list)
  }

  // 已上传文件列表
  uploadList = () => {
    const content = []

    this.props.creatives.map((item) => {
      content.push(
        <li className={Styles.item} key={item.id}>
          <img className={Styles.itemImg} src={item.bannerUrl} />
          <div className={Styles.itemParamer}>
            <p className={Styles.imgName}>{item.fileName}</p>
            <p className={Styles.imgType}>类型： {item.fileName.split('.')[1]} <span className={Styles.ml25}>{item.fileSize ? `大小：${item.fileSize}KB` : ''}</span></p>
            <p className={Styles.imgSize}>尺寸：{item.width}*{item.height}</p>
          </div>
          <div className={Styles.itemAction}>
            <p><Icon type="check-circle" className={Styles.itemIcon} /></p>
            <p className={Styles.ptb12}>
              <a href={item.bannerUrl} target="_blank">预览</a>
            </p>
            <p onClick={this.onRemoveItem.bind(this, item.id)}>删除</p>
          </div>
        </li>
      )
    })

    return (
      <ul className={Styles.materialList}>{content}</ul>
    )
  }

  // 选择同尺寸规格图片
  select = (id, flag) => {
    const { filterList, onResetList } = this.props

    filterList.map((list) => {
      list.map((item) => {
        if (item.flag === flag) {
          if (item.id === id) {
            item.select = true
          } else {
            item.select = false
          }
        }
      })
    })

    onResetList(filterList)
  }

  // 筛选重复图片
  onSave = () => {
    const list = [].concat(this.props.filterList)
    const items = []
    list.forEach((item) => {
      item.forEach((ele) => {
        if (ele.select) {
          items.push(ele)
        }
      })
    })

    if (items.length !== list.length) {
      message.error('请选择需要投放的素材，每个尺寸只能选择一个', 3)
      return false;
    }

    this.props.onUpdate(items)
    this.props.onHide()
  }

  // 重复尺寸图片展示
  repeatList = () => {
    const { filterList } = this.props
    const content = data => data.map((item, index) => {
      if (item.length  === 1) {
        item[0].select = true
        return
      }
      return (
        <div className={Styles.materialFilter} key={index}>
            <p className={Styles.title}>{item[0].width}*{item[0].height}</p>
            <ul className={Styles.content}>
              {
                item.map((list) => {
                  return (
                    <li className={Styles.item} key={list.id} style={{backgroundColor: list.select ? '#FFF7F7' : '#FFF'}}>
                      <img className={Styles.itemImg} src={list.bannerUrl} />
                      <div className={Styles.itemParamer}>
                        <p className={Styles.imgName}>{list.fileType}</p>
                        <p className={Styles.imgType}>类型： png <span className={Styles.ml25}>大小：{list.fileSize}KB</span></p>
                        <p className={Styles.imgSize}>尺寸：{list.width}*{list.height}</p>
                      </div>
                      <div className={Styles.itemAction}>
                        <p onClick={this.select.bind(this, list.id, list.flag)}>选择</p>
                        <p className={Styles.pt25}>
                          <a href={list.bannerUrl} target="_blank">预览</a>
                        </p>
                      </div>
                    </li>
                  )
                })
              }
            </ul>
          </div>
        );
			})
    return (
      <Modal
        visible={this.props.visible}
        title="素材尺寸重复"
        onCancel={this.props.onHide}
        footer={[
          <div className={Styles.save} key="save">
            <Button className={Styles.searchBtn} key="submit" type="primary" size="large" onClick={this.onSave}>保存</Button>
          </div>
        ]}
      >
        <div>
          <p>请选择需要投放的素材，每个尺寸只能选择一个</p>
          {content(this.props.filterList)}
        </div>
      </Modal>
    )
  }

  // render
  render () {
    const props = {
      onChange: this.change,
      showUploadList: false,
      multiple: true,
      action: "/api/public/image/spec/upload"
    }

    return (
      <div className={Styles.content}>
        {this.props.visible && this.repeatList()}
        {this.props.creatives && this.props.creatives.length > 0 && this.uploadList()}
        <div className={Styles.uploadMaterial}>
          <Upload {...props}>
            <Icon type="plus" className={Styles.iconPlus} />
            <p>选择文件</p>
          </Upload>
        </div>
      </div>
    )
  }
};

export default UploadMaterial;
